<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function changeTabe(index){
        for(var i=0;i<oList.length;++i){
            oList[i].className = oDivList[i].className = null;
        }

        oList[index].className = oDivList[index].className = 'select';
    }

    for(var i=0;i<oList.length;++i){
        /*oList[i].onclick = function(){
            changeTabe(i); //真正执行的时候 循环已经结束了 此时的i为oList.length
        }*/

        //下面方案皆可
        // oList[i].iIndex = i;
        // oList[i].onclick = function(){
        //     changeTabe(this.iIndex);
        // }

        //下面两种会损耗性能

        // oList[i].onclick = (function (i) {
        //     return function () {
        //         changeTab(i);
        //     }
        // })(i);

        ~function(i){
            oList[i].onclick = function(){
                changeTab(i);
            }
        }(i)
    }


    //块级作用域 每次循环都会形成一个单独的{}块级作用域，每个块级作用域之间没有冲突
    for (let i=0;i<oList.length;++i){
        oList[i].onclick = function(){
            changeTab(i);
        }
    }
</script>
</body>
</html>